<template>
  <div>
    <!-- 用户信息 -->
    <div class="bgc_gray">
      <van-cell-group>
        <van-cell>
          <template slot="title">
            <van-image
              class="avatar"
              round
              :src="this.user.face || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
            />
            <span class="username">{{ this.user.nickname }}</span>
          </template>
          <template slot="extra">
            <van-button
              class="qiandao"
              round
              icon="../../assets/images/member-study-icon.png"
              @click="jifen"
              >签到</van-button
            >
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 课程信息 -->
      <div class="week">
        <div class="border-mask"></div>
        <van-grid class="count-course" :column-num="2">
          <van-grid-item class="border" :text="user.point || '0'">
            <template slot="icon">
              <div>完成课程</div>
            </template>
          </van-grid-item>
          <van-grid-item :text="String(now_integral)||'0'">
            <template slot="icon"> <div>积分</div> </template></van-grid-item
          >
          <!-- 学习打卡 -->
        </van-grid>
        <van-grid :column-num="7">
          <van-grid-item icon="photo-o" text="周一">
            <template slot="icon">
              <div class="icon-around">
                <van-icon v-show="this.week.Monday" name="success" />
              </div>
            </template>
          </van-grid-item>
          <van-grid-item icon="photo-o" text="周二">
            <template slot="icon">
              <div class="icon-around">
                <van-icon v-show="this.week.Tuesday" name="success" />
              </div>
            </template>
          </van-grid-item>
          <van-grid-item icon="photo-o" text="周三">
            <template slot="icon">
              <div class="icon-around">
                <van-icon v-show="this.week.Wednesday" name="success" />
              </div>
            </template>
          </van-grid-item>
          <van-grid-item icon="photo-o" text="周四">
            <template slot="icon">
              <div class="icon-around">
                <van-icon v-show="this.week.Thursday" name="success" />
              </div>
            </template>
          </van-grid-item>
          <van-grid-item icon="photo-o" text="周五">
            <template slot="icon">
              <div class="icon-around">
                <van-icon v-show="this.week.Friday" name="success" />
              </div>
            </template>
          </van-grid-item>
          <van-grid-item icon="photo-o" text="周六">
            <template slot="icon">
              <div class="icon-around">
                <van-icon v-show="this.week.Saturday" name="success" />
              </div>
            </template>
          </van-grid-item>
          <van-grid-item icon="photo-o" text="周日">
            <template slot="icon">
              <div class="icon-around">
                <van-icon v-show="this.week.Sunday" name="success" />
              </div>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 权限 -->
      <van-cell-group class="cell-right-img">
        <van-cell
          @click="
            $router.push({
              path: '/viPerson',
            })
          "
        >
          <template slot="title">
            <img
              class=""
              src="../../assets/images/member-vip-icon.png"
              alt=""
            />
            <span>我的VIP</span>
          </template>
          <template>
            <van-button plain hairline round class="vip-button" type="info">
              开通VIP
            </van-button>
          </template>
        </van-cell>
        <van-cell
          is-link
          @click="
            $router.push({
              path: '/hasPurchase',
            })
          "
          ><template slot="title">
            <img
              class=""
              src="../../assets/images/member-isbuy-icon.png"
              alt=""
            />
            <span>已购买</span>
          </template>
        </van-cell>
        <van-cell
          is-link
          @click="
            $router.push({
              path: '/myHomework',
            })
          "
          ><template slot="title">
            <img
              class=""
              src="../../assets/images/member-question-icon.png"
              alt=""
            />
            <span>我的题库</span>
          </template>
        </van-cell>
        <van-cell
          is-link
          @click="
            $router.push({
              path: '/myComment',
            })
          "
          ><template slot="title">
            <img
              class=""
              src="../../assets/images/member-ask-icon.png"
              alt=""
            />
            <span>我的提问 ({{ ask_count || 0 }})</span>
          </template>
        </van-cell>
        <van-cell
          is-link
          @click="
            $router.push({
              path: '/myAnswer',
            })
          "
          ><template slot="title">
            <img
              class=""
              src="../../assets/images/member-answer-icon.png"
              alt=""
            />
            <span>我的解答 ({{ answer_count || 0 }})</span>
          </template>
        </van-cell>
        <van-cell
          is-link
          @click="
            $router.push({
              path: '/myStudy',
            })
          "
          ><template slot="title">
            <img
              class=""
              src="../../assets/images/member-study-icon.png"
              alt=""
            />
            <span>学习记录</span>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 消息设置 -->
      <van-cell-group class="message-controls">
        <van-cell
          is-link
          @click="
            $router.push({
              path: '/myMessage',
            })
          "
          ><template slot="title">
            <img
              class=""
              src="../../assets/images/member-msg-icon.png"
              alt=""
            />
            <span>消息中心</span> <span class="idot"></span>
          </template> </van-cell
        ><van-cell
          is-link
          @click="
            $router.push({
              path: '/mySetting',
            })
          "
          ><template slot="title">
            <img
              class=""
              src="../../assets/images/member-seting-icon.png"
              alt=""
            />
            <span>设置</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { tt } from '../../utlis/storage.js'
import { userInfo } from '@/api'

export default {
  data() {
    return {
      type: false,
      week: '',
      now_integral:null,
      user: '',
      ask_count: '',
      answer_count: '',
      data: {
        uid: 1364,
        token: '4e88c905008da01b2d6c6912f8c9558e',
      },
    }
  },
  //window.location.href    https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0ee646b2b432f50b&redirect_uri=http%3A%2F%2Fvideo.zjsxjy.com%2Fwechat%2Fwechat%2FwechatLogin%3Furl%3Dhttp%3A%2F%2Fvideo.zjsxjy.com%2Fwechat%2Fmember%2Findex.html&response_type=code&scope=snsapi_userinfo&state=STATE&uin=MjcyODQ4NDg3&key=f5d5c42ce803f7c294f14284e06a3ef02d29d20e816dcddf2f20270119b22f93d0bad097b1a4f15c88a2b6d0b952f426&pass_ticket=nBCgMy38SOh/Fh2ilRwOeaVFRSmerVCA4w5CKnYPQFL+aORdhLQPUZjwqSoWDCZa3dDkjL/nIZVzXWVRBpHebg==
  created() {
    this.getList1()
  },
  mounted() {},
  methods: {
    async login() {},
    async getList1() {
      try {
        const { data: res } = await userInfo(this.data)
        // console.log(res.data, '用户信息')
        this.ask_count = res.ask_count
        this.answer_count = res.answer_count
        this.user = res.data.user
        // console.log(this.user)
        this.week = res.data.week
      this.now_integral=res.data.user.now_integral
        // console.log(this.week)
      } catch (err) {
        console.log(err)
      }
    },
    jifen() {
      tt('获得10积分')
    },
    /*  setUid() {
      this.$store.commit('setUid', this.uid)
    }, */
  },
}
</script>
<style lang="scss" scoped>
.bgc_gray {
  background-color: #f6f6f6;
}
.avatar {
  width: 60px;
  height: 60px;
  vertical-align: middle;
  margin-right: 20px;
}
.username {
  font-size: 20px;
}
.week {
  margin-top: 20px;
}
.qiandao {
  background-color: #e5f3ff;
}
.icon-around {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  .van-icon-success {
    margin-left: 8px;
    margin-top: 9px;
  }
}
.cell-right-img {
  margin-top: 15px;
}
.cell-right-img img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
  &sapn {
    margin-left: 5px;
  }
}
.message-controls {
  margin-top: 20px;
  margin-bottom: 80px;
}
.message-controls img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
  &sapn {
    margin-left: 5px;
  }
  &.idot {
    width: 4px;
    height: 4px;
    background-color: red;
    border-radius: 50%;
  }
}

/deep/.vip-button {
  width: 80px;
  height: 32px;
  font-size: 14px;
}
/deep/.count-course span {
  font-size: 36px;
  height: 36px;
  line-height: 36px;
  font-weight: 300;
  color: #292b33;
}
.week {
  margin-top: 20px;
  position: relative;
  /deep/ .border-mask {
    position: absolute;
    height: 10px;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    top: 80px;
  }
}
/deep/.message-controls {
  margin-bottom: 80px;
}
/deep/.van-grid-item__content::after{
  border: 0px;
}
</style>
